import React, { PureComponent } from 'react';
import { Grid, Flex, List } from 'antd-mobile';
import Img from '../../components/Img/Img';
import { active } from './HomePromotionBlock.less';

class HomePromotionBlock extends PureComponent {
  onClick = (el, data) => {
    if (data.activityName == '团购') {
      window.location.href = `groupBuy.html#/groupBuy/${data.activityTypeValue}`;
    } else if (data.activityName == '限时抢购') {
      window.location.href = `timeBuy.html#/timeBuy/${data.activityTypeValue}`;
    }
  }
  renderItem = (dataItem) => {
    return (
      <Flex direction="column" style={{ textAlign: 'center', position: "absolute", top: "50%", WebkitTransform: "translateY(-50%)", MsTransform: "translateY(-50%)", transform: "translateY(-50%)", width: "100%" }}>
        <Flex.Item style={{ height: '1rem' }}>
          <Img src={dataItem.goodsImage} style={{ width: '1rem', height: '1rem' }} />
        </Flex.Item>
        <Flex.Item>
          <span style={{ fontSize: '.24rem', color: 'red' }}>{`¥${dataItem.price}`}</span>
        </Flex.Item>
        <Flex.Item>
          <span style={{ fontSize: '.24rem', textDecoration: 'line-through', color: 'gray' }}>{`¥${dataItem.specGoodsPrice}`}</span>
        </Flex.Item>
    </Flex>
    );
  }

  render() { console.log(this.props)
    const { data } = this.props;
    const titleCla = data.activityName == "团购" ? 'tuangou' : 'xianshi';
    let { objectUnionVOList } = data;

    if (objectUnionVOList && objectUnionVOList.length > 4) {
      objectUnionVOList = objectUnionVOList.slice(0, 4);
    }
    return (<List
      className={active}
      renderHeader={() => (
        <div>
          <span className={titleCla} onClick={(el, index) => this.onClick(el, data)} />
          <span style={{ fontSize: '.24rem', color: 'black', fontWeight: '600' }} onClick={(el, index) => this.onClick(el, data)}>&nbsp;{data.activityTypeName}</span>
        </div>
    )}
    >
      <Grid
        data={objectUnionVOList}
        columnNum={4}
        hasLine={false}
        onClick={(el, index) => this.onClick(el, data)}
        renderItem={this.renderItem}
      />
            </List>);
  }
}

export default HomePromotionBlock;
